*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Outfit',sans-serif;
}

body{
background:#f6f7fb;
overflow-x:hidden;
}

/* SECTION */
.web-section{
padding:120px 8%;
position:relative;
overflow:hidden;
/* background:linear-gradient(180deg,#ffffff,#f8fafc); */
background-color: #fff;
}

/* ORBS */
.orb{
position:absolute;
filter:blur(100px);
border-radius:50%;
z-index:0;
}

.orb1{
width:420px;height:420px;
background:radial-gradient(circle,rgba(212,175,55,.18),transparent 70%);
left:-120px;top:-100px;
}

.orb2{
width:380px;height:380px;
background:radial-gradient(circle,rgba(79,70,229,.15),transparent 70%);
right:-120px;bottom:-120px;
}

/* CONTAINER */
.container{
max-width:1400px;
margin:auto;
display:flex;
align-items:center;
gap:80px;
position:relative;
z-index:2;
}

/* LEFT */
.left{
flex:1;
display:flex;
justify-content:center;
opacity:0;
transform:translateX(-120px);
}

/* IMAGE WRAP */
.img-box{

max-width:480px;
height:100%;



transform-style:preserve-3d;
}

/* IMAGE */
.img-box img{
width:100%;
height:100%;
object-fit:cover;
transform:scale(1.15);
animation:zoom 10s ease-in-out infinite;
filter:contrast(1.05) saturate(1.05);
}

@keyframes zoom{
0%,100%{transform:scale(1.15)}
50%{transform:scale(1.28)}
}

/* SHINE */
.img-box::before{
content:"";
position:absolute;
top:-60%;
left:-60%;
width:50%;
height:220%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
transform:rotate(18deg);
animation:shine 5s linear infinite;
z-index:2;
}

@keyframes shine{
0%{left:-70%}
100%{left:140%}
}

/* IMAGE TAGS */
.tag{
position:absolute;
padding:10px 14px;
font-size:11px;
font-weight:700;
border-radius:999px;
backdrop-filter:blur(10px);
z-index:5;
letter-spacing:1px;
animation:float 4s ease-in-out infinite;
}

.tag1{
top:18px;left:18px;
background:rgba(212,175,55,.15);
color:#d4af37;
border:1px solid rgba(212,175,55,.4);
}

.tag2{
bottom:18px;right:18px;
background:rgba(15,23,42,.75);
color:#fff;
border:1px solid rgba(255,255,255,.1);
}

@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}

/* RIGHT */
.right{
flex:1.1;
opacity:0;
transform:translateX(120px);
}

/* TAG */
.label{
font-size:12px;
letter-spacing:3px;
color:#d4af37;
font-weight:700;
margin-bottom:18px;
}

.web-head {
    font-family:'Cinzel',serif;
font-size: clamp(28px, 4vw, 54px);
font-weight: 800;
line-height: 1.2;

/* GRADIENT TEXT */
background: linear-gradient(
90deg,
#d4af37,
#fff6ca,
#173d6d,
#d4af37,
#fff4bc
);

background-size: 300% auto;

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* ANIMATION */
animation: flowColor 6s linear infinite;
}

@keyframes flowColor {
0% {
background-position: 0% center;
}
100% {
background-position: 300% center;
}
}
/* DESC */
p{
color:#475569;
line-height:2;
font-size:16px;
margin-bottom:30px;
max-width:600px;
}

/* POINTS */
.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:30px;
}

.card{
background:rgba(15,23,42,.92);
color:#fff;
padding:16px;
border-radius:14px;
position:relative;
overflow:hidden;
transition:.4s;
border:1px solid rgba(255,255,255,.05);
}

.card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
transform:skewX(-20deg);
transition:.6s;
}

.card:hover::before{
left:140%;
}

.card:hover{
transform:translateY(-6px);
border-color:rgba(212,175,55,.5);
}

/* BUTTON */
.btn{
display:inline-block;
padding:14px 28px;
background:linear-gradient(135deg,#d4af37,#fff3b0);
color:#0f172a;
font-weight:800;
border-radius:12px;
text-decoration:none;
transition:.3s;
}

.btn:hover{
transform:translateY(-5px);
}

/* RESPONSIVE */
@media(max-width:992px){
.container{
flex-direction:column;
text-align:center;
}

.left,.right{
transform:none!important;
}
.grid{
grid-template-columns:1fr;
}
.img-box{
width: 100%;
height:380px;
}
}